A basic example of a combined Bar/Line chart

This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier for you to copy and paste it if you wish.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
	[No canvas support]
</canvas>

This is the code that generates the chart:

<script>
	window.onload = function ()
	{
		/**
		* The order in which you create the charts is important - the Line chart must be last. If you create the Bar object
		* second, it will be drawn "on top" of the Line.
		*/
		var bar  = new RGraph.Bar({
			id: 'cvs',
			data: [143,140,141,135,136,132,129,125,126,127,127,129],
			options: {
				textAccessible: true
			}
		})

		var line = new RGraph.Line({
			id: 'cvs',
			data: [14,35,15,36,37,26,28,18,38,17,9,14],
			options: {
				backgroundGrid: false,
				noaxes: true,
				linewidth: 3,
				tickmarks: 'endcircle',
				yaxispos: 'right',
				ymax: 50,
				title: 'A combined Bar and Line chart',
				tooltips: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
				tooltipsEvent: 'mousemove'
			}
		})


		/**
		* Some Bar chart configuration
		*/
		bar.set({
			ymax: 250,
			gutterLeft: 50,
			gutterRight: 5,
			colors: ['yellow'],
			strokestyle: '#ddd',
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
			shadow: false,
			tooltips: !RGraph.ISOLD ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] : null
		})




		/**
		* These gutters determine the correct placement of the Line chart
		*/
		line.set({
			gutterLeft: bar.get('gutterLeft') + ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutter.right')) / 24)
		});
		line.set({
			gutterRight: ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutterRight')) / 24) + bar.get('gutterRight')
		});
		
		/**
		* Don't show Y labels on the Line chart
		*/
		line.set({
			ylabels: false
		});
		
		/**
		* Now draw both of the charts. Bar chart first, then the Line chart is drawn on top of it
		*/
		RGraph.redraw();
	};
</script>